<!DOCTYPE html>
<html lang="zh-cmn" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="Xenon Boostrap Admin Panel"/>
    <meta name="author" content=""/>
    <title></title>
    <base th:href="@{/}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/css/fonts/linecons/css/linecons.css}"/>
    <link rel="stylesheet" th:href="@{/css/fonts/fontawesome/css/font-awesome.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/fonts/css/font-awesome.css}"/>
    <link rel="stylesheet" th:href="@{/css/xenon-core.css}"/>
    <link rel="stylesheet" th:href="@{/css/xenon-forms.css}"/>
    <link rel="stylesheet" th:href="@{/css/xenon-components.css}"/>
    <link rel="stylesheet" th:href="@{/css/xenon-skins.css}"/>
    <link rel="stylesheet" th:href="@{/css/custom.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap-table.css}"/>
    <link rel="stylesheet" th:href="@{/css/toastr.css}"/>
    <link rel="stylesheet" th:href="@{/css/sweetalert2.min.css}"/>
    <script type="application/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
</head>
<body class="page-body">
<script type="text/javascript" th:inline="javascript">
    var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
</script>
<div class="settings-pane">
    <a href="#" data-toggle="settings-pane" data-animate="true">
        &times;
    </a>
    <div class="settings-pane-inner">
        <div class="row">
            <div class="col-md-4">
                <div class="user-info">
                    <div class="user-image">
                        <a href="#">
                            <img src="" class="img-responsive img-circle"/>
                        </a>
                    </div>
                    <div class="user-details">
                        <h3>
                            <a href="">John Smith</a>
                            <span class="user-status is-online"></span>
                        </h3>
                        <p class="user-title">Web Developer</p>
                        <div class="user-links">
                            <a href="" class="btn btn-primary">Edit Profile</a>
                            <a href="" class="btn btn-success">Upgrade</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8 link-blocks-env">
                <div class="links-block left-sep">
                    <h4>
                        <span>Notifications</span>
                    </h4>
                    <ul class="list-unstyled">
                        <li>
                            <input type="checkbox" class="cbr cbr-primary" checked="checked" id="sp-chk1"/>
                            <label for="sp-chk1">Messages</label>
                        </li>
                        <li>
                            <input type="checkbox" class="cbr cbr-primary" checked="checked" id="sp-chk2"/>
                            <label for="sp-chk2">Events</label>
                        </li>
                        <li>
                            <input type="checkbox" class="cbr cbr-primary" checked="checked" id="sp-chk3"/>
                            <label for="sp-chk3">Updates</label>
                        </li>
                        <li>
                            <input type="checkbox" class="cbr cbr-primary" checked="checked" id="sp-chk4"/>
                            <label for="sp-chk4">Server Uptime</label>
                        </li>
                    </ul>
                </div>

                <div class="links-block left-sep">
                    <h4>
                        <a href="#">
                            <span>Help Desk</span>
                        </a>
                    </h4>

                    <ul class="list-unstyled">
                        <li>
                            <a href="#">
                                <i class="fa-angle-right"></i>
                                Support Center
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fa-angle-right"></i>
                                Submit a Ticket
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fa-angle-right"></i>
                                Domains Protocol
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fa-angle-right"></i>
                                Terms of Service
                            </a>
                        </li>
                    </ul>
                </div>

            </div>

        </div>

    </div>

</div>

<div class="page-container">
    <div class="main-content">
        <div class="page-title">
            <div class="title-env">
                <h1 class="title">属性 管理</h1>
                <p class="description">可以对系列进行一系列操作以及管理</p>
            </div>

            <div class="breadcrumb-env">

                <ol class="breadcrumb bc-1">
                    <li>
                        <a href="#"><i class="fa-home"></i>首页</a>
                    </li>
                    <li>
                        <a href="#">导航</a>
                    </li>
                    <li class="active">
                        <strong>属性管理</strong>
                    </li>
                </ol>
            </div>
        </div>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#pane1" data-toggle="tab">商品属性名管理</a></li>
            <li><a href="#pane2" data-toggle="tab">商品属性值管理</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade in active" id="pane1">
                <div class="panel-body">
                    <div class="toolbar text-right">
                        <button type="button" onclick="proAttrNameAdd()" class="btn btn-success">添加商品属性名</button>
                        <button type="button" onclick="delMare()" class="btn btn-danger">批量删除</button>
                    </div>
                    <table id="proAttrNameTab" class="table table-hover table-striped table-bordered example-1"
                           cellspacing="0" width="100%">
                        <thead>
                        <tr class="replace-inputs">
                            <th data-checkbox="true"></th>
                            <th data-field="proAttrNameId">编号</th>
                            <th data-field="proAttrName">商品属性名</th>
                            <th data-field="proAttrType.proAttrTypeName">商品属性名类型</th>
                            <th data-field="proAttrCategory" data-formatter="fmtCategory">商品属性名类别</th>
                            <th data-field="proAttrDescribe">商品属性名描述</th>
                            <th data-field="proAttrState" data-formatter="fmtAttrNameState">商品属性名状态(启用/停用)</th>
                            <th data-formatter="fmtOperate" data-events="optAttrNameEvents">操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="tab-pane fade" id="pane2">
                <div class="panel-body">
                    <div class="toolbar text-right">
                        <button type="button" onclick="prepareAdd()" class="btn btn-success">添加商品属性值</button>
                        <button type="button" onclick="delMare()" class="btn btn-danger">批量删除</button>
                    </div>
                    <table id="proAttrValTab" class="table table-hover table-striped table-bordered example-1"
                           cellspacing="0" width="100%">
                        <thead>
                        <tr class="replace-inputs">
                            <th data-checkbox="true"></th>
                            <th data-field="proAttrValueId">编号</th>
                            <th data-field="proAttrName.proAttrName">商品属性名</th>
                            <th data-field="proAttrValueName">商品属性值名称</th>
                            <th data-field="proAttrValDesc">商品属性值描述</th>
                            <th data-field="proAttrValState">商品属性名状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="proAttrNameForm">
    <form class="form-horizontal">
        <div class="form-group">
            <input type="hidden" name="proAttrNameId"/>
            <label class="control-label col-md-3">商品属性名：</label>
            <div class="col-md-8">
                <input type="text" name="proAttrName" class="form-control" placeholder="请输入属性名称">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">选择属性类型：</label>
            <div class="col-md-8">
                <select name="proAttrTypeId" id="proAttrTypeId" class="form-control">
                    <option value="-1">--请选择--</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">请选择类型：</label>
            <div class="col-md-8">
                <label class="radio-inline">
                    <input type="radio" name="proAttrCategory" checked="checked" value="0">隐形
                </label>
                <label class="radio-inline">
                    <input type="radio" name="proAttrCategory" value="1">显形
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">请选择状态：</label>
            <div class="col-md-8">
                <label class="radio-inline">
                    <input type="radio" name="proAttrState" checked="checked" value="0">正常
                </label>
                <label class="radio-inline">
                    <input type="radio" name="proAttrState" value="1">停用
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">属性名描述：</label>
            <div class="col-md-8">
                <textarea name="proAttrDescribe" class="form-control"></textarea>
            </div>
        </div>
    </form>
</div>
</div>
</div>
<link rel="stylesheet" th:href="@{/js/datatables/dataTables.bootstrap.css}"/>
<script type="application/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="application/javascript" th:src="@{/js/TweenMax.min.js}"></script>
<script type="application/javascript" th:src="@{/js/resizeable.js}"></script>
<script type="application/javascript" th:src="@{/js/joinable.js}"></script>
<script type="application/javascript" th:src="@{/js/xenon-api.js}"></script>
<script type="application/javascript" th:src="@{/js/xenon-toggles.js}"></script>
<script type="application/javascript" th:src="@{/js/datatables/js/jquery.dataTables.js}"></script>
<script type="application/javascript" th:src="@{/js/datatables/dataTables.bootstrap.js}"></script>
<script type="application/javascript" th:src="@{/js/datatables/yadcf/jquery.dataTables.yadcf.js}"></script>
<script type="application/javascript" th:src="@{/js/datatables/tabletools/dataTables.tableTools.min.js}"></script>
<script type="application/javascript" th:src="@{/js/bootstrap-table.js}"></script>
<script type="application/javascript" th:src="@{/js/bootstrap-table-zh-CN.js}"></script>
<script type="application/javascript" th:src="@{/js/xenon-custom.js}"></script>
<script type="application/javascript" th:src="@{/js/toastr.js}"></script>
<script type="application/javascript" th:src="@{/js/jquery.form.min.js}"></script>
<script type="application/javascript" th:src="@{/js/public/dataTable.js}"></script>
<script type="application/javascript" th:src="@{/js/commModal.js}"></script>
<script type="application/javascript" th:src="@{/js/setForm.js}"></script>
<script type="text/javascript" th:src="@{/res/js/proAttr.js}"></script>
<script type="application/javascript" th:src="@{/js/sweetalert2.min.js}"></script>
</body>
</html>